<template>
    <div class="gold-box" v-loading="loading">
        <div class="select-box">
            <span style="font-size:14px;font-weight:600;">用途：</span>
            <el-select v-model="status" @change="statusChange">
                <el-option label="全部" :value="0"></el-option>
                <el-option label="收入" :value="1"></el-option>
                <el-option label="支出" :value="2"></el-option>
            </el-select>
            <span style="font-size:14px;font-weight:600;margin-left:20px;">奖励类型：</span>
            <el-select v-model="category" @change="categoryChange">
                <el-option label="全部" :value="0"></el-option>
                <el-option label="金币" :value="1"></el-option>
                <el-option label="补签卡" :value="2"></el-option>
            </el-select>
        </div>

        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
                fixed
                prop="id"
                label="ID">
            </el-table-column>
            <el-table-column
                prop="createTime"
                :sortable="true"
                label="时间">
                <template slot-scope="scope">
                     <div style="text-align:center;">{{initTime(scope.row.createTime)}}</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="coinRecord"
                label="记录">
                <template slot-scope="scope">
                    <!-- <span v-if="scope.row.coinRecord === '-30'">点评打赏</span>
                    <span v-else-if="scope.row.coinRecord === '-20'">视频打赏</span>
                    <span v-else-if="scope.row.coinRecord === '-10'">提现</span>
                    <span v-else-if="scope.row.coinRecord === '10'">每日签到</span>
                    <span v-else-if="scope.row.coinRecord === '20'">邀请好友</span>
                    <span v-else-if="scope.row.coinRecord === '30'">视频被打赏</span>
                    <span v-else-if="scope.row.coinRecord === '40'">点评被打赏</span>
                    <span v-else-if="scope.row.coinRecord === '50'">新手任务</span>
                    <span v-else-if="scope.row.coinRecord === '60'">每日任务</span>
                    <span v-else-if="scope.row.coinRecord === '70'">限时活动</span>
                    <span v-else-if="scope.row.coinRecord === '80'">时段奖励</span>
                    <span v-else-if="scope.row.coinRecord === '90'">优质视频</span>
                    <span v-else-if="scope.row.coinRecord === '100'">优质评价</span>
                    <span v-else-if="scope.row.coinRecord === '110'">提成</span>
                    <span v-else>-</span> -->
                    <span>{{scope.row.coinRecord || '-'}}</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="reward"
                label="奖励">
                <template slot-scope="scope">
                    <span v-if="scope.row.reward === '1'">金币</span>
                    <span v-else>补签卡</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="count"
                label="数量">
                <template slot-scope="scope">
                    <span v-if="scope.row.count > 0" style="color:#67C23A;">+{{scope.row.count}}</span>
                    <span v-else-if="scope.row.count < 0" style="color: #F56C6C;">{{scope.row.count}}</span>
                    <span v-else>0</span>
                </template>
            </el-table-column>
        </el-table>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    data () {
        return {
            tableData: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            loading: false,
            status: 0,
            category: 0
        }
    },

    props: ['detail'],

    created () {
        if (this.detail && this.detail.userId) {
            this.getDetail()
        }
    },

    methods: {
        async getDetail () {
            if (this.loading) return
            this.loading = true
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userId: this.detail.userId
            }
            if (this.status) {
                params.status = this.status
            }
            if (this.category) {
                params.category = this.category
            }
            let res = await this.$http.get('/user/getUserCoin', {
                params
            })
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        initTime (time) {
            if (time) {
                return formatDate(new Date(time), 'YYYY-MM-DD HH:MM')
            } else {
                return '-'
            }
        },

        statusChange (val) {
            this.pageNum = 1
            this.getDetail()
        },

        sizeChange (val) {
            this.pageNum = 1
            this.pageSize = val
            this.getDetail()
        },

        pageChange (val) {
            this.pageNum = val
            this.getDetail()
        },

        categoryChange (val) {
            this.pageNum = 1
            this.getDetail()
        }
    }
}
</script>

<style lang="scss" scoped>
    .gold-box {
        .select-box {
            margin-bottom: 10px;
        }
        .tools {
            margin-top: 10px;
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
